<template>
  <div class="WG2">
    <el-row style="height: 100%">
      <el-col class="left-col" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <transition>
        <div style="width: 100%;height: 100%;" v-if="activeMainIndex===2">
          <div class="LeftOne">全领域产品————</div>
          <div class="LeftTwo">产品及解决方案</div>
        </div>
        </transition>
      </el-col>
      <el-col class="right-col" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <div style="background:white;width: 100%;height: 100%;">

        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref, toRefs} from "vue";

defineOptions({name: "WeGao3"})
const props = defineProps({
  activeMainIndex: {
    type: Number,
    default: 0
  },
})
const {activeMainIndex} = toRefs(props)
</script>

<style scoped lang="scss">
.WG2 {
  padding-top: 10vh;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.LeftOne {
  color: white;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {

    padding-top: 10vh;
    padding-left: 10vh;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    padding-top: 10vh;
    padding-left: 10vh;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-top: 10vh;
    padding-left: 10vh;

  }
}

.LeftTwo {
  color: white;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    font-size: 30px;
    padding-top: 5vh;
    padding-left: 10vh;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
    padding-top: 5vh;
    padding-left: 10vh;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-top: 5vh;
    padding-left: 10vh;
    font-size: 50px;
  }
}

.left-col {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/src/assets/WeGao/mini/4.jpg");
}

/* 默认布局，大屏幕时 */
.el-row {
  display: flex; /* 使用 Flexbox */
  flex-wrap: wrap; /* 允许内容换行 */
}

/* 媒体查询，小屏幕时 */
@media (max-width: 768px) {
  .el-row {
    //flex-direction: column; /* 改为垂直布局 */
  }

  .right-col {
    order: -1; /* 将右侧内容置于左侧之前 */
  }
}


.v-enter-active {
  transition: all 2s ease-out;
}

.v-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-enter-from,
.v-leave-to {
  transform: translateY(2rem);
  opacity: 0;

}
</style>

